import appendStyle from "./appendStyle.js";
import execTimeout from "./execTimeout.js";
appendStyle(`
.vuc-pc-notice{
  position: absolute;
  right: 0;
  top: 200px;
}
.vuc-pc-notice li{
  width: 360px;
  transform: translateX(100%);
  transition: all .6s;
  overflow: hidden;
  opacity: 0;
}
.vuc-pc-notice li>div{
  border-radius: 4px 0 0 4px;
  background-color: #fff;
  border-right: 0;
  box-shadow: 0 1px 2px red;
  border-left: 4px solid red;
  margin-top: 10px;
  padding: 10px;
}
.vuc-pc-notice li.height{
}
.vuc-pc-notice li.active{
  transform: translateX(0);
  opacity: 1;
}
.vuc-pc-notice li span{
  display: block;
  line-height: 30px;
  font-size: 16px;
  font-weight: bold;
  border-bottom: 1px solid red;
  margin-bottom: 4px;
  color: #666;
}
.vuc-pc-notice li p{
  text-indent: 10px;
  word-break: break-all;
}`);
let messageBox;
function Notice() {
  messageBox = messageBox || document.createElement("ul");
  messageBox.className = "vuc-pc-notice";
  this.cacheList = [];
  this.wrap = messageBox;
  document.body.appendChild(messageBox);
}

Notice.prototype.makeEl = function (type) {
  const show = {
    time: 10,
    fn: () => {
      conf.el.className = `${conf.type} height active`;
      conf.el.style.height = conf.inner.offsetHeight + 20 + "px";
      execTimeout(stay);
    }
  };
  const stay = {
    time: 2400, fn: () => {
      conf.el.className = `${conf.type} height`;
      conf.el.style.height = 0;
      execTimeout(stayHeight);
    }
  };
  const stayHeight = {
    time: 400, fn: () => {
      conf.el.className = `${conf.type}`;
      conf.el.style.height = "0";
      execTimeout(end);
    }
  };
  const end = {
    time: 400, fn: () => {
      try {
        conf.el.parentNode.removeChild(conf.el);
        this.cacheList.push(conf);
      } catch (e) {
      }
    }
  };
  let el = document.createElement("li");
  el.innerHTML = `<div><span></span><p></p></div>`;
  const title = el.querySelector(`span`);
  const content = el.querySelector(`p`);
  const inner = el.querySelector(`div`);
  const conf = {type, el, show, title, content, inner};
  return conf;
}
Notice.prototype.enter = function (type, msg = {}) {
  const conf = this.cacheList.shift() || this.makeEl(type);
  const {el, show, title, content, inner} = conf;
  conf.type = type;
  title.innerHTML = msg.title;
  title.class = msg.title ? `` : "hide";
  content.innerHTML = msg.txt;
  el.className = `${conf.type} height`;
  conf.el.style.height = conf.inner.offsetHeight + 20 + "px";
  this.wrap.appendChild(el);
  execTimeout(show);
};
Notice.prototype.tip = function (msg) {
  this.enter("tip", msg);
};
Notice.prototype.warn = function (msg) {
  this.enter("warn", msg);
};

export default Notice;
